<template>
  <lay-container
    fluid="true"
    class="user-box">
    <lay-row space="10">
      <lay-col
        md="5"
        class="">
        <div class="min-h-[500px] bg-[#fff]">
          <lay-tree
            :data="data"
            :tail-node-icon="false"
            :replace-fields="{
              id:'deptId',
              title:'deptName',
              children:'children'
            }"
            @node-click="handleNodeClick"
            :onlyIconControl="true"
             />
        </div>
      </lay-col>
      <lay-col md="19">
        <lay-tab
          type="brief"
          v-model="current">
          <lay-tab-item
            title="组织维护"
            id="1">
            <div>
              <lay-form
                :model="form"
                ref="layFormRef5"
                :rules="rules5"
                size="xs">
                <lay-field title="组织信息">
                  <lay-row>
                    <lay-col md="8">
                      <lay-form-item
                        label="父组织代码:"
                        prop="email">
                        <lay-input v-model="form.pdeptNo"></lay-input>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="父组织名称:"
                        prop="email">
                        <lay-input v-model="form.parentOrgName">
                          <template #suffix>
                            <lay-icon
                              type="layui-icon-search"
                              color="#009688"></lay-icon
                          ></template>
                        </lay-input>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="代码:"
                        prop="email">
                        <lay-input v-model="form.deptNo"></lay-input>
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                  <lay-row>
                    <lay-col md="8">
                      <lay-form-item
                        label="名称:"
                        prop="email">
                        <lay-input v-model="form.deptName"></lay-input>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="序号:"
                        prop="email">
                        <lay-input-number
                          v-model="form.sort"
                          style="width: 100%"
                          position="right"></lay-input-number>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="组织类型:"
                        prop="email">

                       
                        <lay-input v-model="form.deptType"></lay-input>
                        <!-- <lay-select
                          v-model="form.deptType"
                          style="width: 100%"
                          placeholder="请选择">
                          <lay-select-option
                            :value="1"
                            label="学习"></lay-select-option>
                          <lay-select-option
                            :value="2"
                            label="编码"></lay-select-option>
                          <lay-select-option
                            :value="3"
                            label="运动"></lay-select-option>
                        </lay-select> -->
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                  <lay-row>
                    <lay-col md="8">
                      <lay-form-item
                        label="编制人数:"
                        prop="email">
                        <lay-input-number
                          v-model="form.email"
                          style="width: 100%"
                          position="right"></lay-input-number>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="含子组织编制人数:"
                        prop="email">
                        <lay-input-number
                          v-model="form.email"
                          style="width: 100%"
                          position="right"></lay-input-number>
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                </lay-field>
                <lay-field title="主管及主力信息">
                  <lay-row>
                    <lay-col md="8">
                      <lay-form-item
                        label="主管工号:"
                        prop="email">
                        <lay-input
                          v-model="form.leaderNo"
                          readonly 
                          @click="handleOpenUser"
                          >
                          <template #suffix>
                            <lay-icon
                              type="layui-icon-group"
                              color="#009688"></lay-icon
                          ></template>
                        </lay-input>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="主管姓名:"
                        prop="email">
                        <lay-input v-model="form.leaderName"></lay-input>
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                  <lay-row>
                    <lay-col md="8">
                      <lay-form-item
                        label="助理工号:"
                        prop="email">
                        <lay-input
                          v-model="form.email"
                          readonly>
                          <template #suffix>
                            <lay-icon
                              type="layui-icon-group"
                              color="#009688"></lay-icon
                          ></template>
                        </lay-input>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="助理姓名:"
                        prop="email">
                        <lay-input v-model="form.email"></lay-input>
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                </lay-field>
                <lay-field title="属性信息">
                  <lay-row>
                    <lay-col md="8">
                      <lay-form-item
                        label="成本中心:"
                        prop="email">
                        <lay-input v-model="form.email"></lay-input>
                      </lay-form-item>
                    </lay-col>
                    <lay-col md="8">
                      <lay-form-item
                        label="组织地址:"
                        prop="email">
                        <lay-input v-model="form.email"></lay-input>
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                </lay-field>
                <lay-field title="日历">
                  <lay-row>
                    <lay-col md="8">
                      <lay-form-item
                        label="日历名称:"
                        prop="email">
                        <lay-select
                          v-model="form.email"
                          style="width: 100%"
                          placeholder="请选择">
                          <lay-select-option
                            :value="1"
                            label="学习"></lay-select-option>
                          <lay-select-option
                            :value="2"
                            label="编码"></lay-select-option>
                          <lay-select-option
                            :value="3"
                            label="运动"></lay-select-option>
                        </lay-select>
                      </lay-form-item>
                    </lay-col>
                  </lay-row>
                </lay-field>
              </lay-form>
            </div>
          </lay-tab-item>
          <lay-tab-item
            title="管理信息维护"
            id="2">
            <lay-table
              :page="page"
              :resize="true"
              :height="'100%'"
              :columns="columns"
              :loading="loading"
              :default-toolbar="true"
              size="sm"
              :data-source="dataSource"
              v-model:selected-keys="selectedKeys"
              @change="change"
              @sortChange="sortChange">
              <template #status="{ row }">
                <lay-switch
                  :model-value="row.status"
                  @change="changeStatus($event, row)"></lay-switch>
              </template>
              <template v-slot:toolbar>
                <div class="flex items-center">
                  <div class="flex items-center">
                    <lay-button size="sm"  type="primary">新增</lay-button>
                  </div>
                  <div class="flex items-center ml-[12px]">
                    <lay-button size="sm"  type="primary">删除</lay-button>

                  </div>
                  <div class="flex items-center ml-[12px]">
                    <lay-button size="sm"  type="primary">导入</lay-button>

                  </div>
                </div>
                <!-- <lay-button size="sm" type="primary"></lay-button>
            <lay-button size="sm" @click="remove">删除</lay-button> -->
              </template>
              <template v-slot:operator="{ row }">
                <lay-button
                  size="xs"
                  type="primary"
                  >编辑</lay-button
                >
                <lay-button size="xs">查看</lay-button>
              </template>
            </lay-table>
          </lay-tab-item>
        </lay-tab>
      </lay-col>
    </lay-row>
    <UserSelect v-model="show" >
      <template #default> 
        <div>
          111
        </div>
      </template>
    </UserSelect>
  </lay-container>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { layer } from '@layui/layui-vue';
import {  columnData } from './data.js';
import UserSelect from '@/views/component/userSelect.vue';
import  {getDeptList,getUserList } from '@/api/module/dept'
import {handleTree } from '@/utils'

const current = ref('1');

const data = ref([]);

const form = ref({});

const loading = ref(false);

const show = ref(false);

const selectedKeys = ref([]);

const page = reactive({ current: 1, limit: 10, total: 100 });

const columns = ref(columnData);

const change = (page) => {
  loading.value = true;
  setTimeout(() => {
    dataSource.value = loadDataSource(page.current, page.limit);
    loading.value = false;
  }, 1000);
};


const handleOpenUser = ()=>{
  show.value = true;
}
const sortChange = (key, sort) => {
  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`);
};

const dataSource = ref([

]);

const handleNodeClick = (node) =>{
  form.value = node

}

const getList = () =>{
  getUserList().then(res=>{
    console.log(res)
    //TODO
    dataSource.value = res.data.splice(0,5)
  })
}

onMounted(()=>{
  getList();
  getDeptList().then(res=>{
    const tree = handleTree(res.data,'deptNo','pdeptNo')
    data.value = tree;

  })
 
})
</script>

<style>
.layui-field legend {
  font-size: 12px;
}
.user-box {
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  background: #f8f9f9;
}

.layui-field {
  border-color: #ddd;
}

.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>
